/*
1. react 数据传递载体  props 属性(父子数据传递 )   state 状态  组件之间数据交互  

2. props
a.  props 默认从组件外部（父组件）传入,props 也能在组件内部初始化定义
b.  组件内部 通过生命周期钩子函数    App.defaultProps = {}
c.  props 一般不允许被修改   props 只用来传递数据
d.  props 接收  对象 常量 函数  数组  任何数据
e.  props 在组件内部 通过 this.props 来获取  key-value 
*/ 


// PropTypes  校验Props 
// optionalArray: PropTypes.array,
// optionalBool: PropTypes.bool,
// optionalFunc: PropTypes.func,
// optionalNumber: PropTypes.number,
// optionalObject: PropTypes.object,
// optionalString: PropTypes.string,
// optionalSymbol: PropTypes.symbol,

// 校验 props 接收正确的格式类型的数据 
import PropTypes from 'prop-types'

import React, { Component } from 'react'

const list = ["Vue面试题","原生面试题","CSS3+HTML5面试题"]

const peter = {
  name:"Peter",
  age:29,
  word:"你每天2点了吗?"
}

export default class Props1 extends Component {
  render() {
      console.log(this);
    return (
      <div>
          <h2>
        react prpos 的理解和认识
        <ChildOne
        msg="are you ok ?"
        count={1314520}
        todoChange={()=>console.log('wh2114daydayup')}
        list={list}
        {...peter}
        peter={peter}
   
        />
          </h2>
          
    </div>
    )
  }
}


class ChildOne extends Component{
  changeCount=()=>{
    this.props.count+=10;   // read only data can not change 
} 
    render(){
        console.log(this.props)
        const {msg,count,todoChange,list,word}  =this.props
    return(
      <div>
        <h2>
          ChildOne--childone-1
        </h2>
        <h2 onClick={this.changeCount}>msg -- {msg} </h2>
        <h2>
         msg--{msg}
        </h2>
        <h2>
        count--{count}
        </h2>
        <h2 onClick={todoChange}>
        count--{count}
        </h2>
        <h1>{word} </h1>
        <div>
          {
            list.map((l,i)=>(
              <p key={i}>
              {l}
          </p>
            ))
          }
        </div>
        <ChildDemo list={list} ids="2114" />
      </div>
    )
    }
}

// 初始化定义组件内部的props 
ChildOne.defaultProps = {
  age:18,
  flag:true 
}

ChildOne.propTypes = {
  age:PropTypes.number.isRequired,
  flag:PropTypes.bool.isRequired,
  msg:PropTypes.string.isRequired 
}
// 纯函数组件
function ChildDemo(props){
  console.log(props)
  return (
      <div>
          <h2> ChildDemo - ChildDemo -ChildDemo </h2>
      </div>
  )
}
